<!--货源-->
<template>
  <div class="main_box">
    <Tools>
      <template slot="forms">
        <ToolsForm />
      </template>
    </Tools>
    <Action>
      <template slot="actions">
        <el-dropdown trigger="click">
          <el-button type="danger" size="small" plain>
            统一操作<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="item in unifyList" :key="item.value">{{
              item.name
            }}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <Multiple text="列表选项" :ckList="tableList"></Multiple>
      </template>
    </Action>
    <div class="table_box">
      <el-table :data="tableData" border style="width: 100%" ref="table">
        <el-table-column type="selection" label="全选" width="60">
        </el-table-column>
        <el-table-column type="index" label="序号" width="60">
        </el-table-column>
        <el-table-column label="客户姓名/主要手机" width="160">
          <template slot-scope="scope">
            <div @click="showClient" class="inner_cell">
              <div class="blue_clr action_clazz">{{ scope.row.test }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="出发地">
          <template slot-scope="scope">
            <div class="inner_cell">
              <span class="green_clr">起：</span>{{ scope.row.test }}
            </div>
            <div class="inner_cell">
              <span class="red_clr">终：</span>{{ scope.row.test }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="货物详情及所需车长车型" width="180">
          <template slot-scope="scope">
            {{ scope.row.test }}
          </template>
        </el-table-column>
        <el-table-column label="用车类型">
          <template slot-scope="scope">
            {{ scope.row.test }}
          </template>
        </el-table-column>
        <el-table-column label="客户出价">
          <template slot-scope="scope">
            {{ scope.row.test }}
          </template>
        </el-table-column>
        <el-table-column label="处理日期">
          <template slot-scope="scope">
            {{ scope.row.test }}
          </template>
        </el-table-column>
        <el-table-column label="货源状态">
          <template slot-scope="scope">
            {{ scope.row.test }}
          </template>
        </el-table-column>
        <el-table-column label="最后修改时间" width="160">
          <template slot-scope="scope">
            <router-link to="/supply/timeline">
              <div class="inner_cell">
                <div class="blue_clr">
                  {{ scope.row.test }}
                </div>
              </div>
            </router-link>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <span class="inner_cell" @click="togleExpand(scope.row, 12)">
              <span class="blue_clr"
                >匹配12辆<i class="el-icon-arrow-down el-icon--right"></i
              ></span>
            </span>
            <span
              class="inner_cell"
              style="margin-left: 12px"
              @click="togleExpand(scope.row, 6)"
            >
              <span class="blue_clr"
                >报价6辆<i class="el-icon-arrow-down el-icon--right"></i
              ></span>
            </span>
          </template>
        </el-table-column>
        <el-table-column type="expand" width="1" class-name="no_border">
          <template slot-scope="scope">
            <NumTable />
          </template>
        </el-table-column>
        <el-table-column type="expand" width="1" class-name="no_border">
          <template slot-scope="scope">
            <NumTable />
          </template>
        </el-table-column>
      </el-table>
    </div>
    <Page />
  </div>
</template>
<script>
import { Action, Tools, Page } from '@/components/table/index';
import ToolsForm from './toolsForm';
import NumTable from './numTable';
import { unifyList } from '@/config/index';

const tableList = [{
  name: '客户姓名/主要手机',
  value: 'test'
}, {
  name: '出发地',
  value: 'test'
}, {
  name: '货物详情及所需车长车型',
  value: 'test'
}, {
  name: '用车类型',
  value: 'test'
}, {
  name: '客户出价',
  value: 'test'
}, {
  name: '处理日期',
  value: 'test'
}, {
  name: '货源状态',
  value: 'test'
}, {
  name: '操作人最后修改时间',
  value: 'test'
},]

export default {
  components: {
    Action,
    Tools,
    Page,
    ToolsForm,
    NumTable,
  },
  data () {
    return {
      tableData: [{ test: 'test' }, { test: 'test' }, { test: 'test' }, { test: 'test' }],
      unifyList: unifyList,
      tableList: tableList,
    }
  },
  methods: {
    togleExpand (row, which) {
      let $table = this.$refs.table;
      $table.toggleRowExpansion(row)
    },
    handleAction (which) {

    },
    showClient () {

    }
  }
}
</script>
<style lang="scss" scoped>
.main_box {
  .inner_cell {
    cursor: pointer;
    user-select: none;
    &:hover {
      span {
        color: #000;
      }
    }
    span {
      vertical-align: 0px;
      font-size: 13px;
    }
    .action_clazz {
      cursor: pointer;
    }
  }
  /deep/ .no_border {
    border-right: none;
  }
  /deep/ .el-table__expand-column {
    .cell {
      display: none;
    }
  }
}
</style>
